<template>
  <div>
    <van-popup v-model:show="modelValue" position="bottom">
      <van-picker
        title="选择时间范围"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="cancel"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
defineProps({
  modelValue: Boolean
})
const emit = defineEmits(['onConfirm'])
let hoursList = [],
  minutes = []
for (let i = 0; i <= 59; i++) {
  let timeToFixed = i.toString().padStart(2, 0)
  minutes.push(timeToFixed)
  if (i <= 23) {
    hoursList.push(timeToFixed)
  }
}
const columns = reactive([
  { values: hoursList },
  { values: minutes },
  { values: ['-'] },
  { values: hoursList },
  { values: minutes }
])
const onConfirm = (value) => {
  console.log(value)
  emit(
    'onConfirm',
    `${value[0] + ':' + value[1] + ' - ' + value[3] + ':' + value[4]}`
  )
  cancel()
}
const cancel = () => {
  emit('update:modelValue', false)
}
</script>

<style scoped lang="scss"></style>
